<template>
	<div class="wrapper">
		<div id="menu" v-if="false">
			<div class="md-layout">
				<div class="md-layout-item md-size-50 md-small-size-100">
					<div class="title"><h3>内容*************************************</h3></div>
				</div>
				<div class="md-layout-item md-size-50 md-small-size-100">
					<div class="title"><h3>内容*************************************</h3></div>
				</div>
				<div class="md-layout-item md-size-50 md-small-size-100">
					<div class="title"><h3>内容*************************************</h3></div>
				</div>
				<div class="md-layout-item md-size-50 md-small-size-100">
					<div class="title"><h3>内容*************************************</h3></div>
				</div>
			</div>
			<div class="title"><h3>内容部分</h3></div>
		</div>
		<div v-else>
			<div class="md-layout my-box">
				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box1" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>
				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box2" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>

				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box3" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>
				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box4" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>

				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box5" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>
				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box6" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>

				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box7" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>
				<div style="border: #fc5430 1px solid;" class="md-layout-item md-size-25 md-xsmall-size-100 md-small-size-50 md-medium-size-25">
					<div class="insideTheBox  item-box8" style="width: 100%;padding: 8.5rem 3rem;">内容</div>
				</div>
			</div>
			<div class="atTheBottomOfThe" style="text-align: center;margin-top: 2rem;">
			  <md-button class="md-round">了解更多</md-button>
			</div>
		</div>
		<!-- end menu -->
	</div>
</template>

<script>
export default {
	data() {
		return {
			responsive: false
		};
	},
	methods: {
		onResponsiveInverted() {
			if (window.innerWidth < 500) {
				this.responsive = true;
			} else {
				this.responsive = false;
			}
		}
	},
	mounted() {
		this.onResponsiveInverted();
		window.addEventListener('resize', this.onResponsiveInverted);
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.onResponsiveInverted);
	}
};
</script>

<style lang="css">
.wrapper{
/* border-bottom: #949494 0.1rem solid; */
width: 100%;

}
.insideTheBox{
	width: 100%;
	padding: 8.5rem 3rem;
	background-color: rgba(0,0,0,.5);
	color: white;
}
.title {
  overflow: hidden;
  word-wrap: break-word;
}
.my-box .md-layout-item {
    padding-right: 0!important;
    padding-left: 0!important;
}
.item-box1:hover,
.item-box2:hover,
.item-box3:hover,
.item-box4:hover,
.item-box5:hover,
.item-box6:hover,
.item-box7:hover,
.item-box8:hover{
	opacity: .5;
	cursor: pointer;
}
</style>
